<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <body>
		<input id="file" class="file" type="file" />
    <script type="text/javascript" src="./jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
    <script type="text/javascript">
      let requestData
      document.getElementById('file').addEventListener('change', async e => {
        let file = e.target.files[0];
        if (!file) return
        const result = await $.ajax({
          url: requestData.BASE_API + '/utils/upload',
          method: 'post',
          headers: {
            Authorization: requestData.token
          },
          data: {
            file_key: file.name
          }
        })
        const formData = new FormData()
        formData.append('file', file)
        Object.keys(result.data.fields).map(key => {
          formData.append(key, result.data.fields[key])
        })
        alert(JSON.stringify(result.data))
        const upres = await $.ajax({
          url: result.data.new_action,
          method: 'post',
          data: formData,
          contentType: false,
          processData: false,
          error (xhr, status, err) {
            alert('err:'+err + status)
          }
        })
        
        alert(JSON.stringify(upres))
      })
      
      
      function startSelect (data) {
        requestData = data
        document.getElementById('file').click()
      }
    </script>
  </body>
</html>

